<template>
  <view class="container">
    <view class="list">
      <view class="multi-item">
        <view class="multi-text-child">
          <view class="title">企业认证</view>
          <view class="desc">请填写企业联系信息</view>
        </view>
        <view class="multi-item-child">
          姓名
          <view class="content">
            <input class="uni-input text" placeholder="填写真实姓名" v-model="legal_person" />
          </view>
        </view>
        <view class="multi-item-child">
          电话
          <view class="content">
            <input type="tel" class="uni-input text" placeholder="填写电话" v-model="legal_phone" />
          </view>
        </view>
        <view class="multi-item-child">
          地址
          <view class="content">
            <input type="tel" class="uni-input text" placeholder="填写地址" v-model="cityName" />
          </view>
        </view>
        <view class="multi-item-child">
          公司名称
          <view class="content">
            <input type="text" class="uni-input text" placeholder="填写公司名称" v-model="company_name" />
          </view>
        </view>
        <view class="multi-item-child">
          统一社会信用代码
          <view class="content">
            <input type="text" class="uni-input text" placeholder="填写公司名称" v-model="credit_code" />
          </view>
        </view>

      </view>
    </view>
    <view class="auth-item-box idcard-box">
      <view class="title">法人身份证</view>
      <view class="desc">请确保证件边框完成、字体清晰、亮度均匀</view>
      <image class="auth-img1" :src="legal_card_a ? legal_card_a : './static/auth_img1.png'"
        @click="upLoadImg('legal_card_a')"></image>
      <image class="auth-img2" :src="legal_card_b ? legal_card_b : './static/auth_img2.png'"
        @click="upLoadImg('legal_card_b')"></image>
    </view>
    <view class="auth-item-box">
      <view class="title">公司营业执照</view>
      <image class="auth-img3" :src="license_pic ? license_pic : './static/auth_img3.png'"
        @click="upLoadImg('license_pic')"></image>
    </view>
    <view class="auth-item-box">
      <view class="title">店铺实体照片</view>
      <image class="auth-img3" :src="store_pic ? store_pic : './static/auth_img4.png'" @click="upLoadImg('store_pic')">
      </image>
    </view>
    <view class="auth-item-box">
      <view class="title">资质证书（许可证等可上传多张）</view>
      <image class="auth-img3" :src="certificate_pic ? certificate_pic : './static/auth_img5.png'"
        @click="upLoadImg('certificate_pic')"></image>
    </view>
    <view class="operate-box" @tap="onSumbmit">提交认证</view>
  </view>
</template>

<script>
  import {
    getCity
  } from '@/api/api.js';
  import {
    getContactInfo
  } from '@/api/car.js';
  import {
    carAuth
  } from '@/api/info_setting.js';

  export default {
    data() {
      return {
        multiIndex: [0, 0, 0],
        valueRegion: [0, 0, 0],
        multiArray: [],
        district: [],
        cityId: 0,
        cityName: '',
        company_name: '',
        region: [this.$t(`省`), this.$t(`市`), this.$t(`区`)],
        legal_person: '',
        legal_phone: '',
        legal_card_a: '',
        legal_card_b: '',
        license_pic: '',
        store_pic: '',
        certificate_pic: '',
        company_contact_id: 0,
        credit_code: '',
        contactInfo: {}
      }
    },
    computed: {},
    onLoad(option) {
      this.getCityList();
      console.log('option', option)
      if (option) {
        this.company_contact_id = option.company_contact_id;
        this.getContactInfo();
      }
    },
    onShow() {

    },
    methods: {
      // 获取驾驶员详情
      getContactInfo() {
        var that = this;
        getContactInfo({
          contact_id: that.company_contact_id
        }).then(res => {
          console.log('res-----.', res)
          this.contactInfo = res.data;
          let {
            legal_person,
            legal_phone,
            legal_card_a,
            legal_card_b,
            license_pic,
            store_pic,
            certificate_pic,
            credit_code,
            company_name
          } = res.data
          this.legal_person = legal_person;
          this.legal_phone = legal_phone;
          this.legal_card_a = legal_card_a;
          this.legal_card_b = legal_card_b;
          this.license_pic = license_pic;
          this.store_pic = store_pic;
          this.certificate_pic = certificate_pic;
          this.cityName = res.data.default;
          this.company_name = res.data.company_name
          this.credit_code = res.data.credit_code
        })
      },
      //上传身份证正面照片等
      upLoadImg: function(field) {
        this.$util.uploadImageOne('upload/image', (res) => {
          this[field] = res.data.url;
        });
      },
      onSumbmit() {
        let {
          legal_person,
          legal_phone,
          region,
          legal_card_a,
          legal_card_b,
          license_pic,
          store_pic,
          certificate_pic,
          company_contact_id,
          cityName,
          credit_code,
          company_name
        } = this
        if (!legal_person) {
          uni.showToast({
            icon: 'none',
            title: '请填写真实姓名'
          })
          return;
        }
        if (!legal_phone) {
          uni.showToast({
            icon: 'none',
            title: '请填写电话'
          })
          return;
        }

        // console.log('region', this.region)
        if (!cityName) {
          uni.showToast({
            icon: 'none',
            title: '请填写地址'
          })
          return;
        }
        if (!company_name) {
          uni.showToast({
            icon: 'none',
            title: '请填写公司名称'
          })
          return;
        }
        if (!credit_code) {
          uni.showToast({
            icon: 'none',
            title: '统一社会信用代码'
          })
          return;
        }
        if (!legal_card_a) {
          uni.showToast({
            icon: 'none',
            title: '请上传法人身份证人像页'
          })
          return;
        }
        if (!legal_card_b) {
          uni.showToast({
            icon: 'none',
            title: '请上传身份证国徽页'
          })
          return;
        }
        if (!license_pic) {
          uni.showToast({
            icon: 'none',
            title: '公司营业执照'
          })
          return;
        }
        if (!store_pic) {
          uni.showToast({
            icon: 'none',
            title: '店铺实体照片'
          })
          return;
        }
        if (!certificate_pic) {
          uni.showToast({
            icon: 'none',
            title: '资质证书/许可证等'
          })
          return;
        }

        let params = {
          legal_person,
          legal_phone,
          default: cityName,
          legal_card_a,
          legal_card_b,
          license_pic,
          store_pic,
          certificate_pic,
          type: 2, // 企业
          credit_code,
          company_name
        }
        if (company_contact_id && company_contact_id != 0) {
          params.id = company_contact_id
        }
        carAuth(params).then(res => {
          console.log('res', res)
          if (res.status == 200) {
            uni.showToast({
              icon: 'none',
              title: '提交成功',
              success() {
                uni.navigateBack()
              }
            })
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
          }
        }).catch((err) => {
          uni.showToast({
            title: err,
            icon: 'none'
          })
        })
      },
      getCityList: function() {
        let that = this;
        getCity().then(res => {
          this.district = res.data
          that.initialize();
        })
      },
      initialize() {
        let that = this,
          province = [],
          city = [],
          area = [];
        let cityChildren = that.district[0].c || [];
        let areaChildren = cityChildren.length ? (cityChildren[0].c || []) : [];
        that.district.forEach((item, i) => {
          province.push(item.n);
          if (item.n === this.region[0]) {
            this.valueRegion[0] = i
            this.multiIndex[0] = i
          }
        });
        that.district[this.valueRegion[0]].c.forEach((item, i) => {
          if (this.region[1] == item.c) {
            this.valueRegion[1] = i
            this.multiIndex[1] = i
          }
          city.push(item.n);
        });
        that.district[this.valueRegion[0]].c[this.valueRegion[1]].c.forEach((item, i) => {
          if (this.region[2] == item.c) {
            this.valueRegion[2] = i
            this.multiIndex[2] = i
          }
          area.push(item.n);
        });
        this.multiArray = [province, city, area]
      },
      bindRegionChange: function(e) {
        let multiIndex = this.multiIndex,
          province = this.district[multiIndex[0]] || {
            c: []
          },
          city = province.c[multiIndex[1]] || {
            v: 0
          },
          multiArray = this.multiArray,
          value = e.detail.value;

        this.region = [multiArray[0][value[0]], multiArray[1][value[1]], multiArray[2][value[2]]]
        // this.$set(this.region,0,multiArray[0][value[0]]);
        // this.$set(this.region,1,multiArray[1][value[1]]);
        // this.$set(this.region,2,multiArray[2][value[2]]);
        this.cityId = city.v
        this.cityName = `${this.region[0]}，${this.region[1]}，${this.region[2]}`
        this.valueRegion = [0, 0, 0]
        this.initialize();
      },
      bindMultiPickerColumnChange: function(e) {
        let that = this,
          column = e.detail.column,
          value = e.detail.value,
          currentCity = this.district[value] || {
            c: []
          },
          multiArray = that.multiArray,
          multiIndex = that.multiIndex;
        multiIndex[column] = value;
        switch (column) {
          case 0:
            let areaList = currentCity.c[0] || {
              c: []
            };
            multiArray[1] = currentCity.c.map((item) => {
              return item.n;
            });
            multiArray[2] = areaList.c.map((item) => {
              return item.n;
            });
            break;
          case 1:
            let cityList = that.district[multiIndex[0]].c[multiIndex[1]].c || [];
            multiArray[2] = cityList.map((item) => {
              return item.n;
            });
            break;
          case 2:

            break;
        }
        // #ifdef MP || APP-PLUS
        this.$set(this.multiArray, 0, multiArray[0]);
        this.$set(this.multiArray, 1, multiArray[1]);
        this.$set(this.multiArray, 2, multiArray[2]);
        // #endif
        // #ifdef H5 
        this.multiArray = multiArray;
        // #endif



        this.multiIndex = multiIndex
        // this.setData({ multiArray: multiArray, multiIndex: multiIndex});
      },
    }
  }
</script>

<style lang="scss" scoped>
  page {
    min-height: 100vh;
    background-color: rgb(248, 249, 252);
  }

  .container {
    padding: 32rpx;
  }

  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FFF;
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.9);
    padding: 32rpx 28rpx;
    border-radius: 10rpx;
    margin-bottom: 24rpx;
  }

  .multi-item {
    width: 686rpx;
    padding: 32rpx 28rpx;
    margin-bottom: 24rpx;
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;

    .multi-text-child {
      .title {
        margin-bottom: 24rpx;
        font-weight: 500;
        font-size: 32rpx;
        color: #111E36;
      }

      .desc {
        font-weight: 400;
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.6);
      }
    }

    .multi-item-child {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24rpx 0;

      .content {
        display: flex;
        align-items: center;
        text-align: right;

        .text {
          margin-right: 10rpx;
          font-size: 28rpx;
          color: #333;
          text-align: right;
        }

        .picker-inner {
          display: flex;
          align-items: center;
        }
      }
    }
  }

  .auth-item-box {
    padding: 40rpx 24rpx;

    .title {
      margin-bottom: 20rpx;
      font-weight: 500;
      font-size: 36rpx;
      color: #000000;
    }

    .desc {
      font-size: 28rpx;
      color: #666666;
    }

    .auth-img1 {
      width: 582rpx;
      height: 396rpx;
      display: block;
      margin: 70rpx auto 80rpx;
    }

    .auth-img2 {
      width: 582rpx;
      height: 396rpx;
      display: block;
      margin: 40rpx auto 0;
    }

    .auth-img3 {
      width: 526rpx;
      height: 340rpx;
      display: block;
      margin: 40rpx auto 0;
    }
  }

  .operate-box {
    width: 686rpx;
    height: 96rpx;
    line-height: 96rpx;
    margin: 0rpx auto 30rpx;
    box-sizing: border-box;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    font-weight: 600;
    font-size: 32rpx;
    color: #FFFFFF;
    background: #008DFF;
    text-align: center;
    border-radius: 12rpx;
  }
</style>